import { useState } from "react";
import TabBar from "./componets/TabBar";
import ScrollPageView from "components/ScrollPageView";
import Home from "../home";
import Search from "../search";
import Favorite from "../favorite";
import Toolbox from "../toolbox";
import Persons from "../persons";

enum PagesEnum {
  "home" = "home", // 首页
  "search" = "search", // 商品预览页面
  "favorite" = "heart", // 收藏页面
  "toolbox" = "toolbox", // 结算页面
  "persons" = "rect_214", // 个人信息界面
}

const pagesMap = new Map();
pagesMap.set("home", { iconPath: "home", initialize: true });
pagesMap.set("search", { iconPath: "search", initialize: false });
pagesMap.set("favorite", { iconPath: "heart", initialize: false });
pagesMap.set("toolbox", { iconPath: "toolbox", initialize: false });
pagesMap.set("persons", { iconPath: "rect_214", initialize: false });

const paths = Array.from(pagesMap.keys());
const pages = Array.from(pagesMap.values());

function TabBarBox() {
  const [currentKey, setCurrentKey] = useState(PagesEnum["home"]);

  return (
    <ScrollPageView navigation={{ title: "TabBar" }}>
      {PagesEnum["home"] === currentKey ||
      pagesMap.get(PagesEnum["home"])?.initialize ? (
        <Home selected={PagesEnum["home"] === currentKey} />
      ) : null}
      {PagesEnum["search"] === currentKey ||
      pagesMap.get(PagesEnum["search"])?.initialize ? (
        <Search selected={PagesEnum["search"] === currentKey} />
      ) : null}
      {PagesEnum["favorite"] === currentKey ||
      pagesMap.get(PagesEnum["favorite"])?.initialize ? (
        <Favorite selected={PagesEnum["favorite"] === currentKey} />
      ) : null}
      {PagesEnum["toolbox"] === currentKey ||
      pagesMap.get(PagesEnum["toolbox"])?.initialize ? (
        <Toolbox selected={PagesEnum["toolbox"] === currentKey} />
      ) : null}
      {PagesEnum["persons"] === currentKey ||
      pagesMap.get(PagesEnum["persons"])?.initialize ? (
        <Persons selected={PagesEnum["persons"] === currentKey} />
      ) : null}

      <TabBar
        defaultValue={PagesEnum["home"]}
        tabList={pages}
        onSetViewKey={(selectKey) => {
          const indexNumber = paths.findIndex((key) => key === selectKey);
          pagesMap.set(paths[indexNumber], {
            ...pages[indexNumber],
            initialize: true,
          });
          setCurrentKey(selectKey);
        }}
      />
    </ScrollPageView>
  );
}

export default TabBarBox;
